<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>注册</title>
    </head>
    <body>
        <form action="#">
            <h1>注册</h1>
            <div>
                <label for="username">用户名：</label>
                <input id="username" type="text" />
                <span id="usernameInfo"></span>
            </div>
            <div>
                <label for="pwd">密码：</label>
                <input id="pwd" type="password" />
                <span id="pwdInfo"></span>
            </div>
            <div>
                <label for="confirm">确认密码：</label>
                <input id="confirm" type="password" />
            </div>
            <input id="submitBtn" type="button" value="提交" />
        </form>
        <script src="../js/mock-min.js"></script>
        <script src="./data.js"></script>
        <script src="./ajax.js"></script>
        <script>
            let submitBtn = document.getElementById("submitBtn");
            let username = document.getElementById("username");
            let usernameInfo = document.getElementById("usernameInfo");
            let pwd = document.getElementById("pwd");
            let pwdInfo = document.getElementById("pwdInfo");

            async function validUsername(){
                if(/^\w{6,20}$/.test(username.value)){
                    // let res = await new Promise(function(resolve){
                    //     ajax({
                    //         type:"post",
                    //         url:"/usernameExist",
                    //         async:false,
                    //         data:{
                    //             username:username.value
                    //         },
                    //         success(res){
                    //             resolve(res);

                    //         }
                    //     });
                    // });
                    // let res = await ajax({
                    //     type:"post",
                    //     url:"/usernameExist",
                    //     data:{
                    //         username:username.value
                    //     }
                    // });
                    // if(res.status == 1){
                    //     usernameInfo.innerHTML = "√";
                    //     return true;
                    // }else{
                    //     usernameInfo.innerHTML = "用户名已存在";
                    //     return false;
                    // }
                    let res = await ajax({
                        type:"post",
                        url:"/usernameExist",
                        data:{
                            username:username.value
                        }
                    });
                    if(res.status == 1){
                        usernameInfo.innerHTML = "√";
                        return true;
                    }else{
                        usernameInfo.innerHTML = "用户名已存在";
                        return false;
                    }
                 

                }else{
                    usernameInfo.innerHTML = "用户名格式不正确";
                    return false;
                }

            }
            function validPwd(){
                if(/^.{6,}$/.test(pwd.value)){
                    pwdInfo.innerHTML = "√";
                    return true;
                }else{
                    pwdInfo.innerHTML = "密码格式不正确";
                    return false;
                }
            }
            username.onblur = validUsername;
            pwd.onblur = validPwd;
            submitBtn.onclick = async function(){
                if(await validUsername() && validPwd()){

                    let res = await ajax({
                        type:"post",
                        url:"/reg",
                        data:{
                            username:username.value,
                            pwd:pwd.value
                        },
                       
                    });
                    alert("注册成功");
                    location.href = "login.html";
                }else{
                    alert("注册失败");
                }

            }
        </script>
    </body>
</html>
